<template>
  <template 
    v-for="item in subMenu.children" 
    :key="item.path" 
  >
    <el-submenu :index="item.id.toString()" v-if="item.children">
      <template #title>
        <i :class="item.icon"></i>
        <span>{{item.name}}</span>
      </template>
      <template v-if="item.children">
        <nav-menu-item :sub-menu="item" />
      </template>
    </el-submenu>
    <el-menu-item :index="item.fullPath" v-else>
      <i :class="item.icon" v-if="item.icon"></i>
      <template #title>{{item.name}}</template>
    </el-menu-item>
  </template>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'NavMenuItem',
  props: {
    subMenu: {
      type: Object,
      defalut: {}
    }
  },
  setup() {
    
  },
})
</script>
